import {uEditUserPassword} from '@/api/user'
import {FormInstance, message} from 'ant-design-vue'
import {PropType} from 'vue'
import {IconImg} from '../image'
import {logout} from '@/libs/toolkit'
import {ChangeVisible} from '../modal'
import {CnBoldSpan, CnMediumSpan, CnNormalSpan} from '../text'
import './index.less'
import {fa} from 'element-plus/es/locale'

const MFTable = defineComponent({
  setup(props, {slots}) {
    return () => <table class='table-auto w-full mb-20'>{slots.default?.()}</table>
  }
})

const MFTbody = defineComponent({
  setup(props, {slots}) {
    return () => <tbody>{slots.default?.()}</tbody>
  }
})

const MFTr = defineComponent({
  setup(props, {slots}) {
    return () => <tr class='h-56'>{slots.default?.()}</tr>
  }
})

const MFTdByLabel = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-right pl-55'>{slots.default?.()}</td>
  }
})

const MFTdByValue = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-left'>{slots.default?.()}</td>
  }
})

const MFTdByUnit = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-left  pr-55'>{slots.default?.()}</td>
  }
})

const EditUserInfoModalForm = defineComponent({
  props: {
    changeVisible: Function as PropType<ChangeVisible>,
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive<{
      userPassword: string
      userNewPassword: string
      affirmPassword: string
      spinning: boolean
    }>({
      userPassword: '',
      userNewPassword: '',
      affirmPassword: '',
      spinning: false
    })

    function handleConfirmClick() {
      console.log(state.userPassword.trim(), '旧密码')
      console.log(state.userNewPassword.trim(), '新密码')
      console.log(state.affirmPassword.trim(), '确认密码')
      if (state.userNewPassword.trim() == state.affirmPassword.trim()) {
        if (state.userNewPassword.trim().length >= 6) {
          if (state.userPassword != state.userNewPassword) {
            // if(state.userPassword)
            verifyMsgShow.accordanceMsgShow = false
            verifyMsgShow.correctMsgShow = false
            state.spinning = true
            uEditUserPassword({
              userId: props.userInfo.userId,
              userOldPassword: state.userPassword.trim(),
              userNewPassword: state.userNewPassword.trim()
            })
              .then(res => {
                state.spinning = false
                props.changeVisible && props.changeVisible(false)
                emit('finish')
                logout()
                message.success('修改密码成功,请重新登录!')
              })
              .catch(err => {
                state.spinning = false
              })
          } else {
            message.info('旧密码不能与新密码一致!')
          }
        } else {
          console.log('密码不能少于6位')
          verifyMsgShow.correctMsgShow = true
          verifyMsgShow.correctMsg = '密码不能少于6位'
          if (state.userNewPassword.trim().length == 0) {
            verifyMsgShow.correctMsgShow = true
            verifyMsgShow.correctMsg = '密码不能为空'
          }
        }
      } else {
        console.log('两次不一致')
        verifyMsgShow.accordanceMsgShow = true
        verifyMsgShow.accordanceMsg = '两次输入的密码必须一致'
      }
      // if()
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
    }

    onMounted(() => {
      // state.userPassword = props.userInfo.userPassword || ''
    })

    const verifyMsgShow = reactive({
      correctMsgShow: false,
      correctMsg: '',
      accordanceMsgShow: false,
      accordanceMsg: ''
    })

    const newPasswordInput = (e: any) => {
      console.log(e.target.value)
      if (e.target.value.trim().length < 6) {
        verifyMsgShow.correctMsgShow = true
        verifyMsgShow.correctMsg = '密码不能少于6位'
      }
      if (e.target.value.trim().length == 0) {
        verifyMsgShow.correctMsgShow = true
        verifyMsgShow.correctMsg = '密码不能为空'
      }
      if (e.target.value.trim().length >= 6 && e.target.value.trim().length != 0) {
        verifyMsgShow.correctMsgShow = false
      }
    }

    const affirmPasswordInput = (e: any) => {
      if (e.target.value.trim() != state.userNewPassword) {
        verifyMsgShow.accordanceMsgShow = true
        verifyMsgShow.accordanceMsg = '两次输入的密码必须一致'
      } else {
        verifyMsgShow.accordanceMsgShow = false
      }
    }
    return () => (
      <div class='relative pt-20'>
        <MFTable>
          <MFTbody>
            <MFTr>
              <td colspan={3}>
                <IconImg imgName='header' class='w-80 h-80 mx-auto mb-28'></IconImg>
              </td>
            </MFTr>

            <MFTr>
              <MFTdByLabel>
                <CnBoldSpan class='min-w-20'>旧密码：</CnBoldSpan>
              </MFTdByLabel>
              <MFTdByValue>
                <a-input-password
                  placeholder='输入旧密码'
                  v-model={[state.userPassword, 'value']}
                ></a-input-password>
              </MFTdByValue>
              <MFTdByUnit></MFTdByUnit>
            </MFTr>
            <MFTr class='verMsgB'>
              <MFTdByLabel>
                <CnBoldSpan class='min-w-20'>新密码：</CnBoldSpan>
              </MFTdByLabel>
              <MFTdByValue>
                <a-input-password
                  placeholder='输入新密码'
                  v-model={[state.userNewPassword, 'value']}
                  onBlur={newPasswordInput}
                ></a-input-password>
                {verifyMsgShow.correctMsgShow ? (
                  <a class='verMsgA' style='color:red;font-size:12px;letter-spacing: 1px;'>
                    {verifyMsgShow.correctMsg}
                  </a>
                ) : null}
              </MFTdByValue>
              <MFTdByUnit></MFTdByUnit>
            </MFTr>
            <MFTr class='verMsgB'>
              <MFTdByLabel>
                <CnBoldSpan class='min-w-20'>确认密码：</CnBoldSpan>
              </MFTdByLabel>
              <MFTdByValue>
                <a-input-password
                  placeholder='再次输入新密码'
                  v-model={[state.affirmPassword, 'value']}
                  onBlur={affirmPasswordInput}
                ></a-input-password>
                {verifyMsgShow.accordanceMsgShow ? (
                  <a style='color:red;font-size:12px;letter-spacing: 1px;' class='verMsgA'>
                    {verifyMsgShow.accordanceMsg}
                  </a>
                ) : null}
              </MFTdByValue>
              <MFTdByUnit></MFTdByUnit>
            </MFTr>
          </MFTbody>
        </MFTable>

        <div class='ant-modal-footer'>
          <a-button loading={state.spinning} class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
        </div>
      </div>
    )
  }
})

export default EditUserInfoModalForm
